<p-accordion class="receivers_p-accordion" [multiple]="true">

    <p-accordionTab header="{{'Alert Notification Receivers'|translate}}" [selected]="true">
        <div style="text-align: right">
        <button pButton pRipple type="button" label="Add Individual" style="width:15rem" class="p-mr-2 p-mb-2" ></button>
        <button pButton pRipple type="button" label="Add Group" style="width:15rem" class="p-mr-2 p-mb-2" ></button>
            <button pButton pRipple type="button" label="Modify" style="width:15rem" class="p-mr-2 p-mb-2" ></button>
            <button pButton pRipple type="button" label="Delete" style="width:15rem" class="p-mr-2 p-mb-2" ></button>
            <button pButton pRipple type="button" label="Move Up" style="width:20rem;margin-left: 20px" class="p-mr-2 p-mb-2"></button>
            <button pButton pRipple type="button" label="Move Down" style="width:20rem" class="p-mb-2"></button>
        </div>
        <p-table [value]="dataArr">
            <ng-template pTemplate="header">
                <td style="text-align: center">
                </td>
                <tr>
                    <th>Id</th>
                    <th>Receiver</th>
                    <th>Type</th>
                    <th>Enabled</th>
                    <th>Remark</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-item let-i="rowIndex">
                <tr>
                    <td>{{i + 1}}</td>
                    <td>{{item.Receiver}}</td>
                    <td>{{item.Type}}</td>
                    <td>{{item.Enabled}}</td>
                    <td>{{item.Remark}}</td>
                </tr>
            </ng-template>
        </p-table>
    </p-accordionTab>
    <div style="text-align: right">
        <button pButton pRipple type="button" label="Restore Default" style="width:15rem" class="p-mr-2 p-mb-2" ></button>
        <button pButton pRipple type="button" label="Restore Default" style="width:15rem" class="p-mr-2 p-mb-2" ></button>
    </div>

</p-accordion>

